<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>FOREST-爱心宠物系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description"/>
    <meta content="Coderthemes" name="author"/>
    <!-- App favicon -->
    <link rel="shortcut icon" href="assets/images/favicon.ico">

    <!-- App css -->
    <link href="assets/css/icons.min1.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/app.min1.css" rel="stylesheet" type="text/css"/>

    <script src="js/username.js"></script>
    <style type="text/css">
        .mmm {
            font-size: 10px;
            color: red;
        }
</style>
    <script src="js/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" type="text/css"
          href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.4.0/sweetalert2.min.css "/>
</head>

<body class="authentication-bg" id="bgd">

<div class="account-pages mt-5 mb-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-5">
                <div class="card">

                    <!-- Logo -->
                    <div class="card-header pt-4 pb-4 text-center bg-primary">
                        <a href="index.html">
                            <span><img src="assets/images/logo.png" alt="" height="50" width="150"></span>
                        </a>
                    </div>

                    <div class="card-body p-4">

                        <div class="text-center w-75 m-auto">
                            <h4 class="text-dark-50 text-center mt-0 font-weight-bold">登录</h4>
                            <p class="text-muted mb-4">请输入您的登录账号和密码以访问</p>
                        </div>


                        <div class="form-group">
                            <label for="ForestUserName">登录昵称: <span id="Forest_1"></span></label>
                            <input class="form-control" type="text" id="ForestUserName" placeholder="请输入用户名" required>
                        </div>

                        <div class="form-group">
                            <a href="pages-recoverpw.html" class="text-muted float-right">
                                <small>忘记密码?</small>
                            </a>
                            <label for="ForestPassward">用户密码:<span id="Forest_2"></span></label>
                            <input class="form-control" type="password" id="ForestPassward" required
                                   placeholder="请输入密码">
                        </div>
                        <div class="form-group mb-3">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="checkbox-signin"
                                       disabled="disabled">
                                <label class="custom-control-label" for="checkbox-signin">记住我</label>
                            </div>
                        </div>

                        <div class="form-group mb-0 text-center">
                            <button class="btn btn-primary" type="submit" id="denglu"> 登录</button>
                        </div>

                    </div> <!-- end card-body -->
                </div>
                <!-- end card -->

                <div class="row mt-3">
                    <div class="col-12 text-center">
                        <p class="text-muted">没有账号? <a href="Forest_Register.html"
                                                       class="text-muted ml-1"><b>注册</b></a></p>
                        <p class="text-muted">高级账号? <a href="Forest_Login1.html"
                                                       class="text-muted ml-1"><b>管理登录</b></a></p>
                    </div> <!-- end col -->
                </div>
                <!-- end row -->

            </div> <!-- end col -->
        </div>
        <!-- end row -->
    </div>
    <!-- end container -->
</div>
<!-- end page -->

<footer class="footer footer-alt">
    2020 - 2021 © Hyper - Coderthemes.com
</footer>

<!-- App js -->
<script src="assets/js/app.min.js"></script>
<script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.4.0/sweetalert2.min.js "></script>


</body>
<script type="text/javascript">
    var imgObjTrue = $("<img src='assets/true.jpg' height=\"22\" width=\"23\">");
    var imgObjFalse = $("<img src='assets/false.jpg' height=\"22\" width=\"23\">");
    //账号验证
    var flas = false; //标识符
    $("#ForestUserName").blur(function () {
        //取出账号值
        var name = $("#ForestUserName").val();
        //    账号必须为字母+数字的组合，不能出现特殊字符
        var varreg = /^(?=.*[a-zA-Z]+)(?=.*[0-9]+)[a-zA-Z0-9]+$/;
        //alert(varreg.test(name))
        if (name == null || name == "") {
            $("#Forest_1").empty();
            var Forest_1 = $("<span class='mmm'>登录账号不能为空,请重新输入</span>");
            $("#Forest_1").append(imgObjFalse);
            $("#Forest_1").append(Forest_1);
            $("#ForestUserName").val("");
            flas = false;
        } else if (!varreg.test(name)) {
            $("#Forest_1").empty();
            var Forest_1 = $("<span class='mmm'>必须是字母+数字不能出现特殊字符</span>");
            $("#Forest_1").append(imgObjFalse);
            $("#Forest_1").append(Forest_1);
            $("#ForestUserName").val("");
            flas = false;
        } else {
            $("#Forest_1").empty();
            $("#Forest_1").append(imgObjTrue);
            flas = true;
            return;
        }
    });
    var imgObjTrue1 = $("<img src='assets/true.jpg' height=\"22\" width=\"23\">");
    var imgObjFalse1 = $("<img src='assets/false.jpg' height=\"22\" width=\"23\">");
    //密码验证
    var flas1 = false;
    $("#ForestPassward").blur(function () {
        var pass = $("#ForestPassward").val(); //
        //密码规则为字母+数字的组合，不得出现特殊字符
        var patrm1 = /^[a-z0-9]{6,10}$/;
        if (pass == null || pass == "") {
            $("#Forest_2").empty();
            var Forest_2 = $("<span class='mmm'>登录密码不能为空,请重新输入</span>");
            $("#Forest_2").append(imgObjFalse1);
            $("#Forest_2").append(Forest_2);
            $("#ForestPassward").val("");
            flas1 = false;
        } else if (!patrm1.test(pass)) {
            $("#Forest_2").empty();
            var Forest_2 = $("<span class='mmm'>小写字母+数字，不得出现特殊字符，长度为6-10</span>");
            $("#Forest_2").append(imgObjFalse1);
            $("#Forest_2").append(Forest_2);
            $("#ForestPassward").val("");
            flas1 = false;
        } else {
            $("#Forest_2").empty();
            $("#Forest_2").append(imgObjTrue1);
            flas1 = true;
            return;
        }
    });

    //登录
    function denglu() {
        var ForestUserName = $("#ForestUserName").val();  //登录昵称
        var ForestPassward = $("#ForestPassward").val();  //用户密码
        var data = {
            "forest_User_LoginName": ForestUserName,
            "forest_User_Password": ForestPassward
        };
        swal.fire({
            type: 'warning', // 弹框类型
            title: '确认', //标题
            text: "确认是否登录", //显示内容
            confirmButtonColor: '#3085d6',// 确定按钮的 颜色
            confirmButtonText: '确定',// 确定按钮的 文字
            showCancelButton: true, // 是否显示取消按钮
            cancelButtonColor: '#d33', // 取消按钮的 颜色
            cancelButtonText: "取消", // 取消按钮的 文字
            focusCancel: true, // 是否聚焦 取消按钮
            reverseButtons: true  // 是否 反转 两个按钮的位置 默认是  左边 确定  右边 取消
        }).then(function (isConfirm) {
            if (isConfirm.value) {
                if (flas == true && flas1 == true) {
                    $.ajax({
                        url: "login",
                        type: "POST",
                        dataType: "json",
                        contentType: 'application/json;charset=utf-8',
                        data: JSON.stringify(data),
                        async: false,
                        success: function (data) {
                            if (data.code == 200) {
                                window.location.href = userUrl+"/index.html";
                            } else if(data.code==500) {
                                Swal.fire("提示", "请输入正确登录名和密码！！", "error");
                                $("#ForestPassward").val("");
                                $("#ForestUserName").val("");
                            }else
                            {
                                Swal.fire("提示", "登录失败！！", "error");
                            }
                        }
                    });
                } else {
                    Swal.fire("提示", "输入数据有误", "error");
                }
            } else {
                Swal.fire("提示", "已取消提交", "error");
            }
        })


    }


    $(function () {
        //点击登录
        $("#denglu").click(function () {
            denglu();
        })
    });
</script>
</html>
